<template>
    <div id="app">
        <router-view v-if="isShow" />
    </div>
</template>

<script>
    export default {
        name: 'App',
        data () {
            return {
                // 控制router-view的隐藏与展示
                isShow: true
            }
        },
        // 提供可注入子组件属性
        provide () {
            return {
                reload: this.reload
            }
        },
        // 定义reload方法
        methods: {
            reload () {
                // 先隐藏
                this.isShow = false
                // $nextTick() 将回调延迟到下次 DOM 更新循环之后执行
                this.$nextTick(() => {
                    this.isShow = true
                })
            }
        }
    }

</script>

<style lang="scss">
    #app {
        height: 100vh;
    }

    body {
        margin: 0;
    }

    a {
        text-decoration: none;
    }
</style>
